<template>
    <view>
        <view class="feedback-input margin-lr radius" v-if="feedback_valid==0">
            <textarea
            class="padding-sm"
            v-model="stuFeedback"
            placeholder="在这里填写你的反馈～"
            >
            </textarea>
        </view>
        <view v-else class="padding-lr text-content padding-bottom">
            <text>{{feedback.content}}</text>
        </view>
        <!--        <view class="uni-form-item uni-column">
            <view class="title" style="font-size: medium">需要反馈的内容:</view>
            <input class="uni-input" style="font-size: medium;padding-left: 30rpx;" name="content" placeholder="请输入课程反馈"
                v-bind:disabled="feedbackDone" :value="con.report_feedback.content" />
        </view> -->
        <view class="rate flex flex-direction justify-center align-center text-lg text-bold padding-tb">
            <text>{{feedback?'您对本次课程的打分':'请您对本次课程打分'}}</text>
            <uni-rate v-model="score" allowHalf="true" max="5" :readonly="feedback"></uni-rate>
        </view>
        <!--        <view class="uni-form-item uni-column">
            <view class="title" style="font-size: medium;padding-left: 30rpx;">小节评分:</view>
            <slider name="slider" show-value min=0 max=5 step=1 v-bind:disabled="feedbackDone" :value="con.report_feedback.score"
                @changing="sliding"></slider>
        </view> -->
        <view class="submit-button flex justify-center padding-bottom" v-if="feedback_valid==0">
            <button class="cu-btn bg-green" @click="formSubmit" v-bind:disabled="feedbackDone">提交</button>
        </view>
        <view class="submit-button flex justify-center padding-bottom" v-if="feedback_valid==1">
            <button class="cu-btn bg-green" @click="formSubmit" :disabled="true">您已经提交过反馈</button>
        </view>
        <view class="submit-button flex justify-center padding-bottom" v-if="feedback_valid==2">
            <button class="cu-btn bg-green" @click="formSubmit" v-bind:disabled="true">课程尚未结束哦</button>
        </view>
    </view>
</template>

<script>
import uniRate from '@/components/third_party/uni-rate/uni-rate.vue';
export default {
    name: 'Feedback',
    components: {
        uniRate
    },
    props: {
        feedback: Object,
        feedback_valid: Number,
    },
    data() {
        return {
            score: 1,
            stuFeedback: ''
        };
    },
    watch: {
        feedback(val) {
            //检测传过来的feedback的值
            if(val) {
                this.score = val.score;
                this.stuFeedback = val.content;
            }
        }
    },
    methods: {
        formSubmit: function() {
            this.$emit('feedback', this.score, this.stuFeedback);
        }
    },
};
</script>

<style lang="scss" scoped>
    $input-height: 6em;

    .feedback-input {
        background-color: rgb(240, 240, 240);

        textarea {
            height: $input-height;
            width: 100%;
        }
    }

    .submit-button{
        button{
            width: 60%;
            border-radius: 30rpx;
        }
    }

    .rate{
        border-top: solid 1px rgb(240, 240, 240);
    }
</style>
